<template>
    <div class="main" v-loading="loading"  element-loading-text="登录中">
        <div class="login-box">
            <div class="content">
                <h1>欢迎登入</h1>
                <input type="text" placeholder="用户名" v-model="username">
                <input type="text" placeholder="密码" v-model="password">
                <div class="btnLine">
                    <div class="btn" @click="loginClick()">登入</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
        username:"admin",
        password:"123456",
        loading:false
    }
  },
  methods:{
      loginClick() {
        let data = {
            username:this.username,
            password:this.password
        }
        this.loading = true
        
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
    width: 100%;
    min-width: 1200px;
    height: 100%;
    background: url('../assets/images/loginbg.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-box {
    width: 500px;
    /* height: 300px; */
    background: #fff;
    border-radius: 5px;
}
.content {
    padding: 20px 10px;
}
.content h1 {
    text-align: center;
    padding-bottom: 35px;
    font-size: 30px;
    color: #2c3748;
}
.content input {
    display: block;
    margin: 0 auto;
    width: 384px;
    height: 36px;
    padding-left: 10px;
    font-size: 14px;
    color: #282836;
    box-sizing: border-box;
    line-height: 36px;
    margin-bottom: 20px;
    clear: both;
}
.content .btnLine{
    margin: 0 auto;
    /* margin-bottom: 20px; */
    width: 384px;
    overflow: hidden;
    /* border-bottom: 1px solid #dfdfdf; */
}

.content  .btnLine span {
    float: left;
    font-size: 12px;
    color: #282836;
    cursor: pointer;
    margin-top: 10px;
}
.content .btnLine span i {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #dfdfdf;
    float: left;
    margin-right: 5px;
}
.content  .btnLine .btn {
    width: 100px;
    height: 36px;
    margin: 0 auto;
    background-color: #1bbc9d;
    border: none;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    line-height: 36px;
}
</style>
